<template>
  <div>
    <s-tree
      ref="STree"
      :treeData="treeData"
      :checkable="true"
      :multiple="true"
      :default-selected-keys="['1']"
      :replace-fields="replaceFields"
      style="width:200px"
      @selectedKeysChange="selectedKeysChange($event)"
      @selectedNodesChange="selectedNodesChange($event)"
      @expandedKeysChange="expandedKeysChange($event)"
      @checkedKeysChange="checkedKeysChange($event)"
      @checkedNodesChange="checkedNodesChange($event)"
    >
      <template v-slot:menu="{ record }">
        <a-menu>
          <a-menu-item
            v-for="item in menuData"
            :key="item.key"
            @click="menuClick(item.key, record)"
          >
            <a type="primary">
              {{ item.title }}
            </a>
          </a-menu-item>
          <!-- <a-menu-item key="1" @click="delNode(record)">
            <a type="primary">
              删除
            </a>
          </a-menu-item> -->
        </a-menu>
      </template>
    </s-tree>
    <!-- <a-button type="primary" @click="addNode">
      添加
    </a-button>
    <a-button type="primary" @click="delNode">
      删除
    </a-button>
    <a-button type="primary" @click="editNode">
      编辑
    </a-button>
    <a-button type="primary" @click="getNodeByKey">
      查找节点
    </a-button>
    <a-button type="primary" @click="getParentKeyByKey">
      查找父Key
    </a-button> -->
  </div>
</template>

<script>
import { isEmpty } from "lodash";
import STree from "./components/STree";
var i = 1;
export default {
  components: {
    STree
  },
  data() {
    return {
      treeData2: [
        {
          title: "parent 1",
          key: "0-0",
          scopedSlots: { title: "title" },
          children: [
            {
              title: "parent 1-0",
              key: "0-0-0",
              scopedSlots: { title: "title" },
              children: [
                {
                  title: "leaf",
                  key: "0-0-0-0",
                  scopedSlots: { title: "title" }
                },
                {
                  title: "leaf",
                  key: "0-0-0-1",
                  scopedSlots: { title: "title" }
                }
              ]
            },
            {
              title: "0-0-1",
              key: "0-0-1",
              scopedSlots: { title: "title" },
              children: [
                {
                  key: "0-0-1-0",
                  title: "sss",
                  scopedSlots: { title: "title" }
                }
              ]
            }
          ]
        }
      ],
      treeData: [],
      replaceFields: {
        key: "id",
        title: "name",
        children: "children"
      },
      selectedKeys: [],
      expandedKeys: [],
      selectedNodes: {},
      menuData: [
        { key: "add", title: "添加" },
        { key: "del", title: "删除" },
        { key: "edit", title: "编辑" },
        { key: "getNodeByKey", title: "查找节点" },
        { key: "getParentKey", title: "查找父Key" }
      ],
      flattenData: [
        {
          id: "1-1-2",
          name: "节点1-1-2",
          parentId: "1-1",
          scopedSlots: { title: "title" }
        },
        {
          id: "1-1",
          name: "节点1-1",
          parentId: "1",
          scopedSlots: { title: "title" }
        },
        {
          id: "1",
          name: "节点1",
          parentId: "root",
          scopedSlots: { title: "title" }
        },
        {
          id: "1-2",
          name: "节点1-2",
          parentId: "1",
          scopedSlots: { title: "title" }
        },
        {
          id: "1-1-1",
          name: "节点1-1-1",
          parentId: "1-1",
          scopedSlots: { title: "title" }
        },
        {
          id: "1-2-2",
          name: "节点1-2-2",
          parentId: "1-2",
          scopedSlots: { title: "title" }
        }
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.selectedKeys = this.defaultSelectedKeys;
      // if (this.isFormatTreeData(this.treeData)) {
      //   this.treeData = this.formatTreeData(this.treeData, [])
      // }
      this.treeData = this.formatFlattenDataToTreeData(this.flattenData);
    },
    formatFlattenDataToTreeData(items) {
      const result = [];
      const itemMap = {};

      for (let i = 0; i < items.length; i++) {
        const id = items[i].id;
        itemMap[id] = items[i];
        if (!itemMap[id].children) {
          itemMap[id].children = [];
        }
      }
      console.log(itemMap);
      for (const key in itemMap) {
        const element = itemMap[key];
        if (element.parentId) {
          if (element.parentId === "root") {
            result.push(element);
          } else {
            itemMap[element.parentId].children.push(element);
          }
        }
      }
      return result;
    },
    formatTreeData(tree, formatData) {
      let l = tree.length;
      for (let i = 0; i < l; i++) {
        if (!tree[i].parentKey || tree[i].parentKey == "root") {
          this.$set(tree[i], "children", []);
          formatData.push(tree[i]);
          tree.splice(i, 1);
          i--;
          l--;
        } else if (tree[i].parentKey) {
          if (this.$refs.STree.get(tree[i].parentKey, formatData)) {
            this.pushWithKey(tree[i].parentKey, formatData, tree[i]);
            tree.splice(i, 1);
            i--;
            l--;
          }
        }
      }
      if (!isEmpty(tree)) {
        formatData = this.formatTreeData(tree, formatData);
      }
      return formatData;
    },
    pushWithKey(key, tree, obj) {
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        if (node.key === key) {
          console.log("添加");
          if (node.children) {
            node.children.push(obj);
          } else {
            this.$set(node, "children", []);
            node.children.push(obj);
          }
          break;
        } else if (node.children) {
          this.pushWithKey(key, node.children, obj);
        }
      }
    },
    isFormatTreeData(tree) {
      for (let i = 0; i < tree.length; i++) {
        if (tree[i].parentKey) {
          return true;
        }
      }
      return false;
    },
    menuClick(key, record) {
      switch (key) {
        case "add":
          this.addNode(record);
          break;
        case "del":
          this.delNode(record);
          break;
        case "edit":
          this.editNode(record);
          break;
        case "getNodeByKey":
          this.getNodeByKey(record);
          break;
        case "getParentKey":
          this.getParentKeyByKey(record);
          break;
        default:
          break;
      }
    },
    addNode(record) {
      let obj = {
        name: "新加的",
        id: "0-0-1-" + i,
        scopedSlots: { title: "title" }
      };
      i++;
      this.$refs.STree.addNode(record.id, obj);
    },
    delNode(record) {
      this.$refs.STree.delNode(record.id);
    },
    editNode(record) {
      let obj = {
        name: "编辑的",
        id: "0-0-1-" + i,
        scopedSlots: { title: "title" }
      };
      i++;
      this.$refs.STree.editNode(record.id, obj);
    },
    getNodeByKey(record) {
      let result = this.$refs.STree.getNodeByKey(record.id);
      console.log(result);
    },
    getParentKeyByKey(record) {
      let result = this.$refs.STree.getParentKeyByKey(record.id);
      console.log(result);
    },
    selectedKeysChange(val) {
      this.selectedKeys = val;
      console.log(this.selectedKeys);
    },
    selectedNodesChange(val) {
      this.selectedNodes = val;
      console.log(this.selectedNodes);
    },
    expandedKeysChange(val) {
      this.expandedKeys = val;
      console.log(this.expandedKeys);
    },
    checkedKeysChange(val) {
      console.log(val);
    },
    checkedNodesChange(val) {
      console.log(val);
    }
  }
};
</script>

<style></style>
